<%--
  Created by IntelliJ IDEA.
  User: Mankind
  Date: 2017/7/14
  Time: 19:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String userName = request.getParameter("userName"); %>
<!DOCTYPE html>
<html>
<head>
    <title>基于SSH的个人博客系统</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${path}/css/main.css">
    <link href="${path}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${path}/css/font-awesome.min.css" rel="stylesheet">
    <link href="${path}/css/simple-line-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="${path}/css/manager.css">
    <link rel="stylesheet" href="${path}/css/personal-message.css">
    <link href="${path}/css/multiple-select.css" rel="stylesheet"/>
    <link rel="stylesheet" href="${path}/css/fileinput.min.css">
    <link rel="stylesheet" href="${path}/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" type="text/css" href="${path}/css/xcConfirm.css"/>
    <link rel="stylesheet" href="${path}/css/bootstrapValidator.min.css">
</head>
<body id="body">
<header class="app-header navbar" id="header">
    <a class="navbar-brand" href="#"></a>
    <ul class="nav navbar-nav hidden-md-down">
        <li class="nav-item px-1">
            <a type="button" class="nav-link" href="main.html">普通用户可点</a>
        </li>
        <li class="nav-item px-1">
            <a class="nav-link" href="blog.html">VIP通道</a>
        </li>
        <li class="nav-item px-1">
            <a class="nav-link" href="#" name="randomGo">超级VIP通道</a>
        </li>
    </ul>
    <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
            <!-- <a class="nav-link navbar-toggler aside-menu-toggler" href="index.html">退出系统</a> -->
            <button id="reset" type="button" class="btn btn-primary btn-default">退出系统</button>
        </li>

    </ul>
</header>
<div class="container" id="content-wrap">
    <div class="row clearfix" id="content">
        <div class="col-md-3 column "  id="content-left">
            <div class="panel-group" id="panel-800988">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="panel-title" data-toggle="collapse" data-parent="#panel-800988" href="#panel-element-1">用户管理</a>
                    </div>
                    <div id="panel-element-1" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <ul>
                                <li>
                                    <a href="#" class="1" name="message">个人信息</a>
                                </li>
                                <li>
                                    <a href="#" class="2" name="role">分配角色</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="panel-title" data-toggle="collapse" data-parent="#panel-800988" href="#panel-element-2" >博客管理</a>
                    </div>
                    <div id="panel-element-2" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul>
                                <li><a href="#" class="1">发表文章</a></li>
                                <li><a href="#" class="2">博客编辑</a></li>
                                <li><a href="#" class="3">博客分类</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a class="panel-title" data-toggle="collapse" data-parent="#panel-800988" href="#panel-element-3">标签管理</a>
                    </div>
                    <div id="panel-element-3" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul>
                                <li><a href="#" class="1">新的标签</a></li>
                                <li><a href="#" class="2">标签编辑</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9 column " id="content-right">
            <div class="tabbable" id="tabs-948784">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#panel-1" data-toggle="tab"  name="message">个人信息</a>
                    </li>
                    <li>
                        <a href="#panel-2" data-toggle="tab"  name="role">我的关注</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="panel-1">
                        <div class="right-body">
                            <div class="row">
                                <div class="col-md-12 column col-md-push-6 search-bar" >
                                    <form >
                                        <div class="col-md-3 ">
                                            <input type="text"  class="form-control "  placeholder="请输入查找昵称:" name="name" id="userName">
                                        </div>
                                        <button id="reset" type="button" class="btn btn-primary btn-sm">开始查找</button>
                                        <button id="reset" type="button" class="btn btn-primary btn-sm">重置条件</button>
                                    </form>
                                </div>
                                <div class="col-md-12 column">
                                    <table id="first-table" class="table table-striped " style="table-layout:fixed">  
                                        <thead>
                                        <tr>
                                            <th>用户</th>
                                            <th>性别</th>
                                            <th>电话</th>
                                            <th>微信</th>
                                            <th>邮箱</th>
                                            <th>职业</th>
                                            <th>最近登录时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <form>
                                                    <td>1</td>
                                                    <td contenteditable="true">2</td>
                                                    <td>3</td>
                                                    <td>4</td>
                                                    <td>5</td>
                                                    <td>6</td>
                                                    <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">22233333333333333333333333333333333333333333333333333333333333</td>  
                                                    <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">222333333333333333333333333333333333333333333333333333</td>  
                                                </form>
                                            </tr>
                                            <tr>
                                                <form contenteditable="true">
                                                    <td>
                                                    <input contenteditable="false" type="text" name="" value="1" style="display:none">
                                                    <span >1</span>
                                                    </td>
                                                    <td>
                                                    </td>
                                                    <td>3</td>
                                                    <td>4</td>
                                                    <td>5</td>
                                                    <td>6</td>
                                                </form>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <ul id="first-paginator"></ul>
                        </div>
                    </div>
                    <div class="tab-pane" id="panel-2">
                        <div class="right-body">
                            <div class="row clearfix">
                                <div class="col-md-12 column col-md-push-6 search-bar" >
                                    <form >
                                        <div class="col-md-3 ">
                                            <input type="text"  class="form-control "  placeholder="请输入查找昵称:" name="name" id="userName">
                                        </div>
                                        <button id="reset" type="button" class="btn btn-primary btn-sm">开始查找</button>
                                        <button id="reset" type="button" class="btn btn-primary btn-sm">重置条件</button>
                                    </form>
                                </div>
                                <div class="col-md-12 column">
                                    <table id="second-table" class="table table-striped " style="table-layout:fixed">
                                        <thead>
                                        <tr>
                                            <th>用户</th>
                                            <th>拥有角色</th>
                                            <th>分配角色</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <ul id="second-paginator"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>

</script>
<script src="${path}/js/jquery-3.0.0.min.js"></script>
<script src="${path}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${path}/js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="${path}/js/fileinput.min.js"></script>
<script src="${path}/js/multiple-select.js"></script>
<script type="text/javascript" src="${path}/js/fileinput_locale_zh.js"></script>
<script src="${path}/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="${path}/js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script src="${path}/js/distpicker.data.min.js"></script>
<script src="${path}/js/distpicker.min.js"></script>
<script src="${path}/js/back.js"></script>
<script src="${path}/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>
<script src="${path}/js/bootstrapValidator.min.js"></script>
<script src="${path}/js/language/zh_CN.js"></script>
<script type='text/javascript'>
    function init(){

    }
    $('.form_date').datetimepicker({
        //language:  'fr',
        format: 'yyyy-mm-dd',
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0
    });
    function getLocalTime(nS) {     
       return new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ").replace(/上午|下午/g,"");      
    }                      
    function getUserInfoTotalPages(){
        $.ajax({
            type:"POST",
            dataType:"json",
            url:'/user/getUserInfoTotalPages',
            success:function(data){
                if(data.totalPages!=0)
                {
                    var options = {
                        currentPage: 1,
                        totalPages: data.totalPages,
                        numberOfPages:8,
                        bootstrapMajorVersion:3,
                        useBootstrapTooltip:true,
                        itemTexts:function(type,page, current){//文字翻译
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "尾页";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked: function (event, originalEvent, type, page){
                            $.ajax({
                                type: "POST",
                                dataType:"json",
                                url:'/user/getUserInfoByPage?Page='+page, //点击分页提交当前页码
                                success:function(data){
                                    var list = data.userInfoList;
                                    //DOM操作
                                    $("#first-table").empty();
                                    var head='<colgroup><col style="width:10%"><col style="width:15%"><col style="width:20%"><col style><col style="width:20%"><col style></colgroup><thead><tr><th>用户</th><th>电话</th><th>微信</th><th>邮箱</th><th>最近登录时间</th><th>操作</th></tr></thead><tbody>';
                                    $("#first-table").append(head);
                                    if (list.length != 0){
                                        for(var i=0;i<list.length;i++){
                                            var html =
                                                '<tr>'+//
                                                '<td>'+//
                                                '<span name="userName-'+list[i].userId+'">'+list[i].userName+'</span>'+//
                                                '<input style="display:none;text-align:center;width:100%" type="text" name="userName-'+list[i].userId+'" value="'+list[i].userName+'">'+
                                                '</td>'+
                                                '<td>'+//
                                                '<span name="telephone-'+list[i].userId+'">'+list[i].telephone+'</span>'+//
                                                '<input style="display:none;text-align:center;width:100%" type="text" name="telephone-'+list[i].userId+'" value="'+list[i].telephone+'">'+
                                                '</td>'+//
                                                '<td>'+//
                                                '<span name="wechat-'+list[i].userId+'">'+list[i].wechat+'</span>'+//
                                                '<input style="display:none;text-align:center;width:100%" type="text" name="wechat-'+list[i].userId+'" value="'+list[i].wechat+'">'+
                                                '</td>'+//
                                                '<td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">'+//
                                                '<span name="email-'+list[i].userId+'">'+list[i].email+'</span>'+//
                                                '<input style="display:none;text-align:center;width:100%" type="text" name="email-'+list[i].userId+'" value="'+list[i].email+'">'+
                                                '</td>'+//
                                                '<td>'+//
                                                getLocalTime(list[i].recentlyTime)+//
                                                '</td>'+//
                                                '<td>'+//
                                                 '<button type="button" class='+//
                                                '"btn btn-warning btn-default" name="modify-'+list[i].userId+'">编辑'+//
                                                '</button>'+////按钮！！！！！
                                                '<button type="button" class='+//
                                                '"btn btn-warning btn-default" name="delete-'+list[i].userId+'">删除'+//
                                                '</button>'+////按钮！！！！！
                                                '</td>'+//
                                                '</tr>'
                                                ;//

                                            $("#first-table").append(html);
                                        }
                                    }
                                    else{
                                        $("#first-table").append('暂无数据！！！');
                                    }
                                    var tail='</tbody>';
                                    $("#first-table").append(tail);
                                    //添加JS功能-编辑
                                    $("button[name^='modify-']").click(function(){
                                        var text=$(this).text();
                                        var id=$(this).attr("name").split("-")[1];
                                        var userName=$(this).parent().parent().find("input[name='userName-"+id+"']").val();
                                        var telephone=$(this).parent().parent().find("input[name='telephone-"+id+"']").val();
                                        var wechat=$(this).parent().parent().find("input[name='wechat-"+id+"']").val();
                                        var email=$(this).parent().parent().find("input[name='email-"+id+"']").val();
                                        if(text=="编辑")
                                        {
                                            // $(this).parent().parent().find('span').css("display","none");
                                            // $(this).parent().parent().find('input').css("display","block");
                                            $(this).parent().parent().find('span').toggle();
                                            $(this).parent().parent().find('input').toggle();
                                            $(this).text("保存");   
                                        }
                                        else
                                        {
                                            $.ajax({
                                                type: "POST",
                                                url:'/user/updateUserInfo?id='+id+'&userName='+userName+'&telephone='+telephone+ //
                                                '&wechat='+wechat+'&email='+email,
                                                success:function(){
                                                    $("span[name='userName-"+id+"']").text(userName).toggle();
                                                    $("span[name='telephone-"+id+"']").text(telephone).toggle();
                                                    $("span[name='wechat-"+id+"']").text(wechat).toggle();
                                                    $("span[name='email-"+id+"']").text(email).toggle();
                                                    $("input[name='userName-"+id+"']").val(userName).toggle();
                                                    $("input[name='telephone-"+id+"']").val(telephone).toggle();
                                                    $("input[name='wechat-"+id+"']").val(wechat).toggle();
                                                    $("input[name='email-"+id+"']").val(email).toggle();
                                                    $("button[name='modify-"+id+"']").text("编辑");

                                                }
                                            })
                                        }
                                    })
                                    //添加js删除逻辑
                                    $("button[name^='delete-']").click(function(){
                                        var id=$(this).attr("name").split("-")[1];
                                            if(confirm("确定要删除数据吗？")){
                                                $.ajax({
                                                    type: "POST",
                                                    url:'/user/deleteUserInfo?id='+id,
                                                    success:function(){
                                                        $($('#first-paginator').children().get(page-1)).children().click();
                                                        alert("删除成功");
                                                    }   
                                                })
                                            }
                                    })
                                }
                                //success end;
                            })
                        }
                    }
                    $('#first-paginator').bootstrapPaginator(options);
                    $($('#first-paginator').children().get(0)).children().click();
                }
                else
                {
                    $("#first-table").empty();
                    var head=' <thead><tr><th>用户</th><th>性别</th><th>电话</th><th>微信</th><th>邮箱</th><th>职业</th><th>最近登录时间</th><th>操作</th></tr></thead><tbody>';
                    $("#first-table").append(head);
                    $("#first-paginator").empty();
                }
            }
        })
    } 
    function getUserInfoAndRoleTotalPages(){
        $.ajax({
            type:"POST",
            dataType:"json",
            url:'/user/getUserInfoTotalPages',
            success:function(data){
                if(data.totalPages!=0)
                {
                    var options = {
                        currentPage: 1,
                        totalPages: data.totalPages,
                        numberOfPages:8,
                        bootstrapMajorVersion:3,
                        useBootstrapTooltip:true,
                        itemTexts:function(type,page, current){//文字翻译
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "尾页";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked: function (event, originalEvent, type, page){
                            $.ajax({
                                type: "POST",
                                dataType:"json",
                                url:'/user/getUserInfoAndRoleByPage?Page='+page, //点击分页提交当前页码
                                success:function(data){
                                    var list = data.userInfoList;
                                    var roleList=data.roleListOfUser;
                                    var allRole=data.allRole;
                                    //DOM操作
                                    $("#second-table").empty();
                                    var head='<colgroup><col style="width:10%"><col style="width:45%"><col style="width:20%"><col style="width:25%"></colgroup><thead><tr><th>用户</th><th>拥有角色</th><th>分配角色</th><th></th></tr></thead><tbody>';
                                    $("#second-table").append(head);
                                    if (list.length != 0){
                                        for(var i=0;i<list.length;i++){
                                            var roleNameList="";
                                            for(var j=0;j<roleList[i].length;j++){
                                                roleNameList+=roleList[i][j].roleName;
                                                if(j!=roleList[i].length-1)
                                                roleNameList+=",";
                                            }
                                            var html ='<tr>'+//
                                                '<td>'+//
                                                list[i].userName+//
                                                '</td>'+//
                                                '<td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">'+//
                                                roleNameList+//
                                                '</td>'+//
                                                '<td>'+//
                                                '<form id="form-'+list[i].userId+'"><select style="min-width:10rem;" class="ms" multiple="multiple" name="roleName" id="multiple-role-'+list[i].userId+'"></select></form>'+//
                                                '</td>'+//
                                                '<td>'+//
                                                //按钮！！！！！
                                                '<button type="button" class='+//
                                                '"btn btn-warning btn-default" name="allocation-'+list[i].userId+'">保存分配'+//
                                                '</button>'+////按钮！！！！！
                                                '</td>'+//
                                                '</tr>';//
                                            $("#second-table").append(html);
                                            //添加所有角色
                                            for(var j=0;j<allRole.length;j++)
                                            {
                                                html='<option value="'+allRole[j].roleId+'">'+allRole[j].roleName+'</option>';
                                                $("#multiple-role-"+list[i].userId).append(html);
                                            }

                                            //植入已有的角色
                                            // var arr=[];
                                            // if(roleList[i].length!=0)
                                            // {
                                            //     for(var j=0;j<roleList[i].length;j++)
                                            //     {
                                            //         arr.push(roleList[i][j].roleId);
                                            //         // html='<option value="'+roleList[i][j].roleId+'">'+roleList[i][j].roleName+'</option>';
                                            //         // $("#multiple-role-"+list[i].userId).append(html);
                                            //     }
                                            //     alert(arr);
                                            //     $("#multiple-role-"+list[i].userId).multipleSelect('setSelects', arr);   
                                            //     //
                                            // }
                                             $("#multiple-role-"+list[i].userId).multipleSelect('refresh');  
                                            
                                            
                                        }
                                    }
                                    else{
                                        $("#second-table").append('暂无数据！！！');
                                    }
                                    var tail='</tbody>';
                                    $("#second-table").append(tail);
                                    //添加js分配角色功能
                                    $("button[name^='allocation-']").click(function(){
                                        var id=$(this).attr("name").split("-")[1];
                                        $.ajax({
                                         type: "POST",
                                         url: '/user/roleAssign?id='+id,
                                         data: $("#form-"+id).serialize(),
                                         success:function(){
                                            $($('#second-paginator').children().get(page-1)).children().click();
                                            }                                        
                                        })
                                    })
                                }
                                //success end;
                            })
                        }
                    }
                    $('#second-paginator').bootstrapPaginator(options);
                    $($('#second-paginator').children().get(0)).children().click();
                }
                else
                {
                    $("#second-table").empty();
                    var head='<colgroup><col style="width:10%"><col style="width:60%"><col style="width:20%"></colgroup><thead><tr><th>用户</th><th>拥有角色</th><th>分配角色</th></tr></thead><tbody>';
                    $("#second-table").append(head);
                    $("#second-paginator").empty();
                }
            }
        })
    }   
    $(function(){
        init();
        $("a[name='message']").click(getUserInfoTotalPages);
        $("a[name='role']").click(getUserInfoAndRoleTotalPages);
        $("a[name='message']").click();
        $('select').multipleSelect('refresh');
        $("#image-btn").change(function(e){
        })
        $('#form-2').bootstrapValidator({
            message: 'This value is not valid',
            fields:{
                name:{
                    validators:{
                        notEmpty:{
                            message: '用户名不能为空'
                        }
                    }
                },
                post:{
                    validators:{
                        emailAddress:{
                            message:'请输入合法的邮箱格式'
                        }
                    }
                },
                date:{
                    validators:{
                        date:{
                            format:'YYYY-MM-DD',
                            mssage:"请输入正确的格式"
                        }
                    }
                }
            }
        }).on('success.form.bv', function(e) {
            e.preventDefault();
            alert("验证通过！");
            $.ajax({
                type:"GET",
                url:"userinfo_updateUserInfo",
                data:$('#form-2').serialize(),
                success:function(){
                    alert("成功！");
                }
            })
        });
        $("#hand-in-image").click(function(){
            $("#form-1").submit();
            $("#form-2").submit();
        })
    });

</script>
</body>
</html>